<template>
  <div class="wrap">
    <span class="title">
      {{title}}
      <span v-if="subtitle" class="subtitle"><pre>{{subtitle}}</pre></span>
    </span>
  </div>
</template>

<script>
export default {
  name: 'PageTitle',
  props: {
    title: {
      type: String,
      required: true
    },
    subtitle: {
      type: String,
      required: false
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    position: relative;
    height: 68px;
    text-align: left;
    margin: 12px 0;
    user-select: none;

    .title{
      height: 68px;
      line-height: 68px;
      position: relative;
      color: #333333;
      font-size: 30px;
      font-weight: 700;
      display: inline-block;

      .subtitle{
        height: 68px;
        line-height: 68px;
        top: 0;
        left: 68%;
        float: left;
        position: absolute;
        font-size: 60px;
        font-weight: 800;
        font-family: "Roboto Condensed", sans-serif;
        color: rgb(51, 51, 51);
        opacity: 0.3;
      }
    }
  }
</style>
